<template>
  <view class="tradestatistics">
    <view class="end-title">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        @tap="change(index)"
        :class="['title-item', { dis: btnnum == index }]"
      >
        <view class="text"> {{ item }} </view>
        <view class="end-cont"> </view>
      </view>
    </view>
    <view class="main-content-wrapper">
      <!--规格-模态层弹窗-->
      <view class="data-picker">
        <view class="time" v-if="btnnum == 0" @tap="specClass = 'block'">
          <text> {{ date }}</text>
          <image :src="icon_riqi" class="date-image"></image>
        </view>
        <view class="time" v-if="btnnum == 1" @tap="showPopup">
          <text> {{ months }}</text>
          <image :src="icon_riqi" class="date-image"></image>
        </view>
      </view>
      <view class="shop-car-wrapper" v-if="notifyList.length>0">
        <view
          class="shop-car-item"
          v-for="(item, index) in notifyList"
          :key="index"
        >
          <image
            class="item-image"
            :src="item.product.images[0].path"
          ></image>
          <view class="car-content">
            <view class="name"> {{ item.product && item.product.title }} </view>
            <view class="price"> ￥112 </view>
            <view class="content">
              <text>日浏览量：</text>
              <text>{{ item.browse }}</text>
            </view>
            <view class="content">
              <text>日咨询量：</text>
              <text>{{ item.advisory }}</text>
            </view>
          </view>
        </view>
      </view>
         <rf-empty
      :bottom="bottom"
      :info="'暂无交易的产品~'"
      v-if="notifyList.length === 0 && !loading"
    ></rf-empty>
    </view>
    <view class="popup" :class="specClass">
      <!-- 遮罩层 -->
      <view class="mask" @tap="hide"></view>
      <!--内容层-->
      <view class="layer">
        <slot name="popup">
          <rfCalendar :date="date" @change="changeDate"></rfCalendar>
        </slot>
      </view>
    </view>
    <Popup ref="showPopups" @closepop="closepop" :list="list"></Popup>
    <rfLoading isFullScreen :active="loading"></rfLoading>
  </view>
</template>
<script>
import Popup from "@/components/item-popup/index";
import rfLoadMore from "@/components/rf-load-more/rf-load-more";
import rfCalendar from "@/components/rf-calendar/rf-calendar";
import moment from "@/common/moment";
import { day_statistics, month_statistics } from "@/api/product";
export default {
  components: { rfLoadMore, rfCalendar, Popup },
  data() {
    return {
      path: "",
      notifyList: [],
      specClass: "none",
      list: [],
      btnnum: 0,
      bottom:90,
      date: this.date_time(new Date(), "year"),
      months: this.date_time(new Date(), "month"),
      tabList: ["日交易量", "月交易量"],
      loading: true,
      logo: this.$mSettingConfig.appLogo,
      icon_riqi: this.$mAssetsPath.icon_riqi,
    };
  },
  onLoad() {
    for (let i = 0; i < 12; i++) {
      let month = {
        name: `${i + 1}月`,
      };
      this.list.push(month);
    }
    this.initData();
  },
  methods: {
    async getDay_statistics(date) {
      await this.$http
        .get(day_statistics, {
          date: new Date(date).getTime(),
        })
        .then((res) => {
          this.loading =false
          console.log(res.data)
          this.notifyList = res.data.data;
        })
        .catch(() => {this.loading =false});
    },
    async getMonth_statistics(date) {
      await this.$http
        .get(month_statistics, {
          date: new Date(date).getTime(),
        })
        .then((res) => {
          this.loading =false
          this.notifyList = res.data.data;
        })
        .catch(() => {this.loading =false});
    },
    //显示选择月份的操作
    showPopup() {
      let currentIndex = parseInt(this.months.split("-")[1]-1)
      this.$refs.showPopups.showPopup(currentIndex);
    },
    //日历确认的操作
    changeDate(e) {
      this.date = e.fulldate;
      this.getDay_statistics(this.date);
      this.specClass = "none";
    },
    //时间转换成年月日
    date_time(dateTime, type) {
      let timeSpanStr = null;
      let year = dateTime.getFullYear();
      let month = dateTime.getMonth() + 1;
      if (month > 0 && month < 10) {
        month = "0" + month;
      }
      var day = dateTime.getDate();
      if (day > 0 && day < 10) {
        day = "0" + day;
      }
      if (type == "month") {
        timeSpanStr = year + "-" + month;
      } else {
        timeSpanStr = year + "-" + month + "-" + day;
      }
      return timeSpanStr;
    },
    closepop(e) {
      if (e) {
        let year = new Date().getFullYear();
        let month = parseFloat(e.name);
        if (month > 0 && month < 10) {
          month = "0" + month;
        }
        this.months = year + "-" + month;
        this.getMonth_statistics(this.months);
      }
    },
    // 数据初始化
    initData() {
      this.page = 1;
      this.notifyList = [];
      this.getDay_statistics(this.date);
    },
    change(index) {
      this.loading =true
      this.btnnum = index;
      if (index == 0) {
        this.getDay_statistics(this.date);
      } else {
        this.getMonth_statistics(this.months);
      }
    },
    show() {
      this.specClass = "block";
    },
    hide() {
      this.specClass = "none";
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #fff;
}
.tradestatistics {
  border-top: 1upx solid #eeeeee;
  height: 100vh;
  /* 将三个内容view的display设置为none(隐藏) */
  .end-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 76upx;
    .title-item {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999999;
    }
  }
  .end-title .text {
    flex-grow: 1;
    height: 42upx;
    line-height: 42upx;
    margin-top: 20upx;
    text-align: center;
  }
  .end-cont {
    display: none;
    margin-bottom: 5upx;
    width: 28upx;
    height: 6upx;
    background: #326130;
    border-radius: 3upx;
  }
  .dis {
    color: #326130 !important;
    .end-cont {
      display: block;
    }
  }
  .main-content-wrapper {
    background: #f9f9f9;
    height: 100%;
    .data-picker {
      height: 116upx;
      display: flex;
      align-items: center;
      justify-content: center;
      .time {
        width: 360upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px 0 46upx;
        line-height: 64upx;
        height: 64upx;
        background: #ffffff;
        border-radius: 32upx;
      }
      .date-image {
        height: 28upx;
        width: 28upx;
      }
    }
    .shop-car-wrapper {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 30upx;
      box-sizing: border-box;
      .shop-car-item {
        margin-top: 18upx;
        width: 336upx;
        height: 523upx;
        background: #ffffff;
        border-radius: 10upx;
        .item-image {
          width: 336upx;
          border-radius: 10upx 10upx 0px 0px;
          height: 324upx;
        }
        .car-content {
          .name {
            height: 42upx;
            font-size: 30upx;
            font-weight: 500;
            line-height: 42upx;
          }
          .price {
            font-size: 32upx;
            font-family: DINPro;
            font-weight: bold;
            line-height: 41upx;
          }
          .content {
            font-size: 22upx;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 30upx;
            color: #999999;
          }
        }
      }
    }
  }
  .popup {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    &.show {
      display: block;
      .mask {
        animation: showPopup 0.2s linear both;
      }
      .layer {
        animation: showLayer 0.2s linear both;
      }
    }
    &.hide {
      .mask {
        animation: hidePopup 0.2s linear both;
      }
      .layer {
        animation: hideLayer 0.2s linear both;
      }
    }
    &.none {
      display: none;
    }
    .mask {
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .layer {
      position: fixed;
      z-index: 99;
      bottom: 0;
      width: 100%;
      border-radius: 10upx 10upx 0 0;
      background-color: #fff;
    }
    &.service {
      min-height: 600upx;
      .row {
        margin: 30upx;
        .title {
          font-size: 30upx;
          margin: 10upx 0;
        }
        .description {
          font-size: 28upx;
          color: #999;
        }
      }
    }
    @keyframes showPopup {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes hidePopup {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes showLayer {
      0% {
        transform: translateY(120%);
      }
      100% {
        transform: translateY(0%);
      }
    }
    @keyframes hideLayer {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(120%);
      }
    }
  }
}
</style>
